<template>
	<view>
		<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<view class="group-box" v-for="(item,index) in 5">
					<view class="row">
						<view class="caption">
							<view class="left">
								<image src="@/static/home/subpage/inform.png"></image>
								<text>系统通知</text>
							</view>
							<view class="date">2023-03-31 11:25:25</view>
						</view>
						<view class="title">大标题大标题大标题大标题大标题大标题</view>
						<view class="sub">业内预计今年三星智能手机出货量约2.3亿部 除华为外各品牌智能手机出货量或将同比下滑业内预计今年三星智能手机出货量约2.3亿部 除华为外各品牌智能手机出货量或将同比下滑</view>
						<view class="more">
							<view class="left">
								<text>查看详情</text>
								<image src="@/static/home/subpage/icn_right.png"></image>
							</view>
							<image class="dian" src="@/static/home/subpage/more.png"></image>
						</view>
					</view>
				</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				
			};
		},
		methods:{
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				setTimeout(()=>{
					this.mescroll.endSuccess(9,false);// 加载成功
				},1500)
			},
		}
	}
</script>

<style lang="scss">
.group-box{
	padding:32rpx 32rpx 0rpx;
	.row{
		border-bottom:2rpx solid #F6F7F9;
		padding-bottom:24rpx;
		.caption{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				display: flex;
				align-items: center;
				& image{
					width: 48rpx;
					height: 48rpx;
					margin-right:16rpx;
				}
				& text{
					font-size: 28rpx;
					font-weight: bold;
					color: rgba(0,0,0,0.8);
				}
			}
			.date{
				font-size: 24rpx;
				font-weight: bold;
				color: rgba(0,0,0,0.24);
			}
		}
		.title{
			margin-top:30rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: rgba(0,0,0,0.8);
			padding:0 64rpx;
		}
		.sub{
			margin-top:24rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(0,0,0,0.6);
			line-height: 40rpx;
			padding:0 64rpx;
		}
		.more{
			margin-top:24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 64rpx;
			.left{
				display: flex;
				align-items: center;
				& image{
					width: 48rpx;
					height: 48rpx;
					margin-left:8rpx;
				}
				& text{
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(0,0,0,0.4);
				}
			}
			.dian{
				width:40rpx;
				height:8rpx;
			}
		}
	}
}
</style>
